<!--
 * @Author: early-autumn
 * @Date: 2020-05-11 20:38:20
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 16:00:14
 -->
<template>
  <div class="app-container">
    <tab-selector
      v-model="currentTabSelector"
      :options="tabSelectorOptions"
      @tab-change="handleTabChange"
    ></tab-selector>
    <el-form :inline="true" label-width="68px">
      <el-form-item label="到店时间">
        <date-picker :value="onClinicTime" @input="handleOnClinicTime" />
      </el-form-item>
      <el-form-item>
        <columns-filter-button />
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-document-add" size="mini" :disabled="single">洁牙开单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-chat-dot-round" size="mini" :disabled="single">短信</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-full-screen" size="mini" :disabled="single">改TC</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-full-screen" size="mini">导出</el-button>
      </el-col>
    </el-row>-->

    <el-table
      v-loading="loading"
      border
      :data="personList"
      stripe
      :height="clientHeight"
      :max-height="clientHeight"
      @row-dblclick="handleDetails"
      @cell-click="handleCellClick"
    >
      <el-table-column width="55" align="center" fixed="left">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
        </template>
      </el-table-column>
      <columns-filter-view>
        <el-table-column
          label="病例号"
          align="center"
          prop="yiyaClinicPerson.caseNumber"
          min-width="150"
        />
      </columns-filter-view>
      <columns-filter-view label="头像">
        <el-table-column
          label="头像"
          align="center"
          prop="imageUrl"
          :min-width="'头像'"
        >
          <avatar-image
            slot-scope="scope"
            :patient="scope.row.yiyaClinicPerson"
          ></avatar-image>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column label="姓名" align="center" min-width="120">
          <div slot-scope="scope" style="cursor: pointer">
            {{ scope.row.yiyaClinicPerson.name }}
          </div>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column label="手机号" align="center" min-width="180">
          <hover-phone
            slot-scope="scope"
            :type="1"
            :items="scope.row.yiyaClinicPerson"
          />
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="性别"
          align="center"
          prop="yiyaClinicPerson.sex"
        >
          <template slot-scope="scope">{{
            sexEnum[scope.row.yiyaClinicPerson.sex]
          }}</template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="年龄"
          align="center"
          prop="yiyaClinicPerson.age"
        />
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="已交金额"
          align="center"
          prop="yiyaClinicPerson.overMoney"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="欠费"
          align="center"
          prop="yiyaClinicPerson.arrearage"
        />
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="客户状态"
          align="center"
          prop="yiyaAppointment.personStatus"
          :min-width="'到店状态'.length * 30"
        ></el-table-column>
      </columns-filter-view>
      <!-- <columns-filter-view>
        <el-table-column
          label="看诊状态"
          align="center"
          :min-width="'到店状态'.length * 30"
        >
          <template>...</template>
        </el-table-column>
      </columns-filter-view> -->
      <!-- <columns-filter-view>
        <el-table-column
          label="开单状态"
          align="center"
          prop="yiyaClinicPerson.billingState"
          min-width="100"
        ></el-table-column>
      </columns-filter-view> -->
      <!-- <columns-filter-view>
        <el-table-column
          label="成交状态"
          align="center"
          prop="yiyaClinicPerson.bargainStatus"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view> -->
      <columns-filter-view>
        <el-table-column
          label="TC"
          align="center"
          prop="yiyaAppointment.tcName"
        />
      </columns-filter-view>
      <!-- <columns-filter-view>
        <el-table-column
          label="跟踪状态"
          align="center"
          prop="yiyaClinicPerson.trackStatus"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view> -->
      <!-- <columns-filter-view>
        <el-table-column
          label="消费状态"
          align="center"
          prop="yiyaClinicPerson.consumeStatus"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view> -->
      <!-- <columns-filter-view>
        <el-table-column
          label="回访时间"
          align="center"
          prop="yiyaClinicPerson.visitTime"
          width="180"
        >
          <template slot-scope="scope">
            {{
              scope.row.yiyaAppointment.visitTime &&
              dayjs(scope.row.yiyaAppointment.visitTime).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }}
          </template>
        </el-table-column>
      </columns-filter-view> -->
      <columns-filter-view>
        <el-table-column
          label="到店时间"
          align="center"
          prop="yiyaAppointment.onClinicTime"
          width="180"
        >
          <template slot-scope="scope">
            {{
              scope.row.yiyaAppointment.onClinicTime &&
              dayjs(scope.row.yiyaAppointment.onClinicTime).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }}
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="初诊时间"
          align="center"
          prop="yiyaClinicPerson.firstOnClinicTime"
          width="180"
        >
          <template slot-scope="scope">
            {{
              scope.row.yiyaClinicPerson.firstOnClinicTime &&
              dayjs(scope.row.yiyaClinicPerson.firstOnClinicTime).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }}
          </template>
        </el-table-column>
      </columns-filter-view>
      <empty slot="empty"></empty>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    ></pagination>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { allListAppointment } from '@/api/services/appointment'
import { encode } from '@/utils/utils'
import TabSelector from '@/components/yiya/TabSelector'
import Empty from '@/components/yiya/Empty'
import TablePhone from '@/components/yiya/TablePhone'
import {
  ColumnsFilterButton,
  ColumnsFilterView,
} from '@/components/yiya/TableColumnsFilter'
import {
  getThisMonthStartWithEnd,
  getTodayStartWithEnd,
  getThisWeekStartWithEnd,
  getYesterdayStartWithEnd,
  formatStartWithEnd,
} from '@/utils/date'
import {
  consumptionStatusOptions,
  customerStatusOptions,
} from '@/utils/options'
import { customerStatusEnum, seeingStatusEnum, sexEnum } from '@/utils/enums'
import { mapState } from 'vuex'
import DatePicker from '@/components/yiya/DatePicker/index'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 50,

  orderByColumn: 'onClinicTime',
  isAsc: 'desc',

  personStatus: undefined,
  startCreateTime: undefined,
  endCreateTime: undefined,
  startOnClinicTime: undefined,
  endOnClinicTime: undefined,
  channelFirst: undefined,
  channelSecond: undefined,
  channelThird: undefined,

  departments: undefined,
  billingStatus: undefined,
  tcId: undefined,
  doctorId: undefined,
}

const today = getTodayStartWithEnd()
const thisMonth = getThisMonthStartWithEnd()

export default {
  name: 'TCDiagnose',
  components: {
    DatePicker,
    TabSelector,
    Empty,
    HoverPhone: () => import('@/components/yiya/hoverPhone'),
    ColumnsFilterButton,
    ColumnsFilterView,
    AvatarImage: () => import('@/components/yiya/avatarImage'),
  },
  data() {
    return {
      loading: true,
      tableRadio: null,
      total: 0,
      onClinicTime: undefined,
      personList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      currentTabSelector: ' ',
      currentDate: today,
      clientHeight: document.body.clientHeight - 260,
    }
  },
  computed: {
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
    dayjs() {
      return dayjs
    },
    sexEnum() {
      return sexEnum
    },
    customerStatusEnum() {
      return customerStatusEnum
    },
    consumptionStatusOptions() {
      return consumptionStatusOptions
    },
    seeingStatusEnum() {
      return seeingStatusEnum
    },
    tabSelectorOptions() {
      return [
        {
          label: '总人数',
          value: ' ',
          params: {},
        },
        ...customerStatusOptions.map(({ label, value }) => ({
          label,
          value,
          params: {
            personStatus: value,
          },
        })),
      ]
    },
  },
  mounted() {
    this.queryParams = {
      ...QUERY_PARAMS,
      ...this.$route.query,
      clinicId: +this.clinicId,
    }
    const today = getTodayStartWithEnd()
    this.handleOnClinicTime(today)
  },
  methods: {
    handleCellClick(row, column) {
      if (column.label === '姓名') {
        this.handleDetails(row)
      }
    },
    async getList() {
      try {
        this.loading = true
        const { rows, total } = await allListAppointment(this.queryParams)
        this.personList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.handleCurrentDateChange(today)
    },
    handleTabChange({ params }) {
      this.queryParams.personStatus = params.personStatus
      this.queryParams.startCreateTime = params.startCreateTime
      this.queryParams.endCreateTime = params.endCreateTime
      this.handleQuery()
    },
    handleOnClinicTime(e) {
      const { start, end, time } = formatStartWithEnd(e)
      this.onClinicTime = time
      this.queryParams.startOnClinicTime = start
      this.queryParams.endOnClinicTime = end
      this.handleQuery()
    },
    /**
     * 查看按钮操作
     */
    handleDetails(row) {
      this.$router.push(
        `/tc/details?id=${row.yiyaClinicPerson.id}&appointmentId=${
          row.yiyaAppointment.id
        }&redirect=${encode({
          path: this.$route.path,
          query: this.queryParams,
        })}`
      )
    },
    /**
     * 改变当前时间
     */
    handleCurrentDateChange([start, end]) {
      this.currentDate = [start, dayjs(end).endOf('day')]
      this.handleQuery()
    },
  },
}
</script>

